<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/online.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="./online.html">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" value="" >
                <img src="../img/public/search.png" alt="" >
            </div>
            <div class="login">
                <a href="./loginAndRegister/login.html">登陆</a>
                /
                <a href="./loginAndRegister/register.html">注册</a>
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li> <a href="./course.html">课程中心</a> </li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li><a href="./userSeting.html">个人中心</a> </li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <div class="row citys">
            <div class="left">热门城市</div>
            <div class="right">
                <ul>
                    <!-- <li><a>不限</a></li>
                    <li><a>北京</a></li>
                    <li><a>上海</a></li>
                    <li><a>江苏</a></li>
                    <li><a>济南</a></li>
                    <li><a>河南</a></li>
                    <li><a>天津</a></li>
                    <li><a>沈阳</a></li>
                    <li><a>石家庄</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row grade">
            <div class="left">按年级选择</div>
            <div class="right">
                <ul>
                    <!-- <li><a>不限</a></li>
                    <li><a>一年级</a></li>
                    <li><a>二年级</a></li>
                    <li><a>三年级</a></li>
                    <li><a>四年级</a></li>
                    <li><a>五年级</a></li>
                    <li><a>六年级</a></li>
                    <li><a>初一</a></li>
                    <li><a>初二</a></li>
                    <li><a>初三</a></li>
                    <li><a>高一</a></li>
                    <li><a>高二</a></li>
                    <li><a>高三</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row subject">
            <div class="left">按学科选择</div>
            <div class="right">
                <ul>
                    <!-- <li><a>不限</a></li>
                    <li><a>语文</a></li>
                    <li><a>数学</a></li>
                    <li><a>英语</a></li>
                    <li><a>生物</a></li>
                    <li><a>历史</a></li>
                    <li><a>政治</a></li>
                    <li><a>物理</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row category">
            <div class="left">按类别选择</div>
            <div class="right">
                <ul>
                    <!-- <li><a>不限</a></li>
                    <li><a class="active">期中</a></li>
                    <li><a>期末</a></li>
                    <li><a>小升初</a></li> -->
                </ul>
            </div>
        </div>
        <div class="lesson">
            <ul>
                <li>
                    <!-- <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div> -->
                </li>
            </ul>
        </div>

        <div class="pageNum">
            <button>上一页</button>
            <ul>
                <!-- <li class="active">1</li>
                <li>2</li>
                <li>3</li> -->
            </ul>
            <button class="active">下一页</button>
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>
 

    <script src='../js/jquery.js'></script>
    <!-- <script src="../js/ujiuye.js"></script> -->
    <!-- <script src='../js/online.js'></script> -->
    
    <script src='../js/common.js'></script>

    <script>


        let pages = 1;
        async function getCourselist() {
           
           
            let city = $('main .citys .active').text() =='不限' ? '' : $('main .citys .active').text();
            let grade = $('main .grade .active').text()=='不限' ? '' : $('main .grade .active').text();
            let subject = $('main .subject .active').text()=='不限' ? '' : $('main .subject .active').text();
            let category = $('main .category .active').text()=='不限' ? '' : $('main .category .active').text();
            let [err, obj] = await sendAjax('/list/courselist','get',{
            
            city,
            grade,
            subject,
            category,
            pages
            } );
            console.log(obj,777);
            if (err) {
                   
                let str = '';

                let arr = obj.data;
               
                for (i=1;i<arr.length;i++){
                    str += `<li>

                        <a href="./videoDetail.html?cid=${arr[i].cid}">
                            <div class="top">
                               
                                <img src="${arr[i].image_src}" alt="" class="m">
                                <p>学科：${arr[i].subject_name}</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>${arr[i].title}</span>
                                    <span class="time">地区：${arr[i].area_name}</span>
                                </div>
                                <div class="right">    
                                        ${arr[i].price==0 ? '免费学习' : arr[i].price+'元' } 
                                    </div>
                            </div>
                            </a>
                        </li>`;
                }             
                $('main .lesson>ul').html(str);
                showPage(arr[0]);
            } else {
                console.log('课程数据接口调用失败');
            }

        }
        getCourselist();
        
       let num = 0;
        function  showPage(n){ 
            let p ="";
            num = Math.ceil(n/3);
            for(j=1; j<=num; j++){

                if(j==pages){
                    p += `<li class='active'>${j}</li>`;
                }else{
                    p += `<li>${j}</li>`;
                }
            }
               
                $('.pageNum ul').html(p);
            
                $('.pageNum ul li').click(function(){
                    pages = $(this).text();
                    getCourselist();
                })
        }

        $('.pageNum button:eq(1)').click(function(){
            if(pages == num){
                $(this).removeClass();
                alert('已经最后一页了');
            }else{
                pages++;
                $(this).addClass('active');
                getCourselist();
           
            } 
        });
        $('.pageNum button:eq(0)').click(function(){
            if(pages == 1){
                $(this).removeClass();
                alert('第一页了');
            }else{
                pages--;
                $(this).addClass('active');
                getCourselist();
           
            } 
        });
        


        async function getCity(){
           let [err,obj] =  await sendAjax('/list/citys');
            // console.log(err,obj,999);

            if(err){
                let str ='';
                let arr = obj.data;
                for(obj2 of arr){
                    str +=`<li><a>${obj2.area_name}</a></li>`
                }
                $('main .citys ul').html(`<li><a class='active'>不限<a></li>${str}`);
                $('main .citys ul li>a').click(function(){
                    $(this).addClass('active').parent().siblings().children().removeClass();
                   
                    getCourselist();
                });
               
            }else{
                console.log('城市数据接口调用失败');
            }
        }
        getCity();

        async function getGrade(){
           let [err,obj] =  await sendAjax('/list/grade');
        
            if(err){
                let str ='';
                let arr = obj.data;
                for(obj2 of arr){
                    str +=`<li><a>${obj2.grade_name}</a></li>`
                }
                $('main .grade ul').html(`<li><a class='active'>不限</a></li>${str}`)
                $('main .grade ul li>a').click(function(){
                    $(this).addClass('active').parent().siblings().children().removeClass();
                    getCourselist();
                });
            }else{
                console.log('数据接口调用失败');
            }
        }
        getGrade();

        async function getSubject(){
           let [err,obj] =  await sendAjax('/list/subject');

            if(err){
                let str ='';
                let arr = obj.data;
                for(obj2 of arr){
                    str +=`<li><a>${obj2.subject_name}</a></li>`
                }
                $('main .subject ul').html(`<li><a class='active'>不限</a></li>${str}`);
                $('main .subject ul li>a').click(function(){
                    $(this).addClass('active').parent().siblings().children().removeClass();
                    getCourselist();
                });
            }else{
                console.log('数据接口调用失败');
            }
        }
        getSubject();

        async function getCategory(){
           let [err,obj] =  await sendAjax('/list/category');

            if(err){
                let str ='';
                let arr = obj.data;
                for(obj2 of arr){
                    str +=`<li><a>${obj2.category_name}</a></li>`
                }
                $('main .category ul').html(`<li><a class='active'>不限</a></li>${str}`);
                $('main .category ul li>a').click(function(){
                    $(this).addClass('active').parent().siblings().children().removeClass();
                    getCourselist();
                });
            }else{
                console.log('数据接口调用失败');
            }
        }
        getCategory();

        $('.search img').click(async function(){
            
            let keyword = $('.search input').val();
            // console.log(keyword);
            let [err,obj] = await sendAjax('/list/search','get',{
                keyword,
                pages,
            });

            console.log(obj,888);
            if (err) {
                   
                   let str = '';
                   let arr = obj.data;       
                   for (i=1;i<arr.length;i++){
                       str += `<li>
   
                           <a href="./videoDetail.html?cid=${arr[i].cid}">
                               <div class="top">
                                  
                                   <img src="${arr[i].image_src}" alt="" class="m">
                                   <p>学科：${arr[i].subject_name}</p>
                               </div>
                               <div class="bottom">
                                   <div class="left">
                                       <span>${arr[i].title}</span>
                                       <span class="time">地区：${arr[i].area_name}</span>
                                   </div>
                                   <div class="right">    
                                           ${arr[i].price==0 ? '免费学习' : arr[i].price+'元' } 
                                       </div>
                               </div>
                               </a>
                           </li>`;
                   }             
                   $('main .lesson>ul').html(str);
                   showPage(arr[0]);
               } else {
                   console.log('查找数据接口调用失败');
               }
            
        })
       
 //登录注册
    getUserinfo();
    
    </script>
</body>

</html>